<script lang="ts" setup>
import PageCaontainer from '@/arco-components/PageContainer';
import { IconPlus } from '@arco-design/web-vue/es/icon';
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import TableManageList from './components/TableManageList/index.vue';
import { MODE_OPTION } from '@/constants/dataManage';
import DataPushDrawer from './components/dataPushDrawer/index.vue';
import DataSourceList from './components/DataSourceList/index.vue';
import { openWindow } from '@/utils/util';
import { removeAllChildDom } from '@/utils/util';
const router = useRouter();
const tabKey = ref('table');
const addDrawerShow = ref(false);
// 调用子组件的方法
const dataPushRef = ref<any>();
const handleAddDataTable = (item: any) => {
  const domDelBtn = document.getElementsByClassName('popverListDom');
  domDelBtn[0].remove();
  // removeAllChildDom(domDelBtn)
  if (item?.value === 2) {
    // 接受数据推送
    dataPushRef.value.visibleDrawer(); //调用子组件的show方法
  }
  if (item?.value === 1) {
    // openWindow(`${process.env.VUE_APP_DIO_FORNT}`)
    router.push({
      path: '/indicator/create-datasource'
    });
  }
};
const addDataTable = ref<boolean>(false);
const tableManageListRef = ref();
const addDataTableList = () => {
  tableManageListRef.value.uploadTable();
};
</script>
<template>
  <PageCaontainer>
    <a-card class="data-manage-card">
      <a-tabs v-model:active-key="tabKey" class="data-manage-tab">
        <a-tab-pane key="table" title="表管理"> </a-tab-pane>
        <a-tab-pane key="data" title="数据源管理"> </a-tab-pane>
        <template #extra>
          <a-popover
            trigger="click"
            class="popverListDom"
            v-if="tabKey === 'table'"
          >
            <a-button type="primary" class="mr-18">
              <template #icon>
                <icon-plus />
              </template>
              添加数据表
            </a-button>
            <template #content>
              <ul class="add-data-table">
                <li
                  class="cp"
                  v-for="item of MODE_OPTION"
                  @click="handleAddDataTable(item)"
                >
                  <img class="va_m mr4" :src="item.img" alt="" />{{
                    item.label
                  }}
                </li>
              </ul>
            </template>
          </a-popover>
          <a-button
            type="primary"
            class="mr-18"
            v-else
            @click="
              () => {
                addDrawerShow = true;
              }
            "
          >
            <template #icon>
              <icon-plus />
            </template>
            添加数据源
          </a-button>
        </template>
      </a-tabs>
      <div class="data-manage-card-body">
        <TableManageList v-if="tabKey === 'table'" ref="tableManageListRef" />
        <DataSourceList
          v-if="tabKey === 'data'"
          v-model:showAdd="addDrawerShow"
        />
      </div>
    </a-card>
    <data-push-drawer
      ref="dataPushRef"
      @addDataTable="
        () => {
          addDataTable = true;
          addDataTableList();
        }
      "
    ></data-push-drawer>
  </PageCaontainer>
</template>

<style lang="scss" scoped>
.data-manage-card {
  height: 100%;
  overflow: auto;
  :deep(.arco-card-body) {
    padding: 0;
  }
  &-body {
    // padding: 18px;
  }
}
.add-data-table {
  margin: 0;
  padding: 0;
  li {
    list-style: none;
    font-size: 14px;
    color: #33353b;
    line-height: 30px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    &:hover {
      color: #396efe;
    }
  }
}
</style>
